<script lang="ts" setup>
import { ref, onUpdated } from 'vue';
import { taskbarProps, taskbarEmits } from './taskbar';
import Common from '@/utils';
defineOptions({ name: 'WindowsTaskbar' });
const props = defineProps(taskbarProps);
const emits = defineEmits(taskbarEmits);
const handleTabClick = window => {
  emits('tab-click', window);
};
onUpdated(() => {});
</script>

<template>
  <div class="windows-taskbar">
    <transition-group appear enter-active-class="animate__animated animate__fadeIn animate__fast" leave-active-class="animate__animated animate__fadeOut animate__fast">
      <div v-for="item in windows" :key="item.name" :class="[current == item.name ? 'select' : '', 'windows-taskbar-item']" @click="handleTabClick(item)">
        <el-image style="width: 20px" :src="Common.getImage(item.icon)" fit="contain" v-if="item.icon" />
        <span v-if="item.label">{{ item.label }}</span>
        <div class="line"></div>
      </div>
    </transition-group>
  </div>
</template>

<style lang="scss" scoped>
.windows-taskbar {
  display: flex;
}
.windows-taskbar-item {
  position: relative;
  height: 40px;
  min-width: 25px;
  padding: 0px 15px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  user-select: none;
  margin-right: 5px;
  &:hover {
    background: rgba(220, 220, 220, 0.3);
  }
  &.select {
    background: rgba(220, 220, 220, 0.15);
    &:hover {
      background: rgba(220, 220, 220, 0.3);
    }
  }
  :last-child {
    margin-right: 0px;
  }
  & > span {
    margin-left: 5px;
    font-size: 12px;
  }
  .line {
    background: #758eb3;
    height: 2px;
    width: 90%;
    position: absolute;
    bottom: 0px;
    border-radius: 2px;
  }
}
</style>
